<template>
  <van-dialog
    :show="active === 2"
    :show-confirm-button="false"
    class="init-page-girar-dialog"
  >
    <div
      class="slot"
      style="
        --ac9fedd2: url(/images/init-page/slot.png);
        --ac9fedce: url(/images/init-page/slot_btn.png);
        --ac9fedd0: url(/images/init-page/slot_win.png);
      "
    >
      <div class="slot_title_img">
        <NuxtImg src="/images/init-page/slotTitle.png" />
      </div>
      <div class="slot_game">
        <p class="slot_title">
          <span>{{ lang.girar_title }}</span
          >X{{ formData.data_1 }}
        </p>
        <div class="slot-container">
          <div class="slot-strip">
            <div
              v-for="(item, index) in slotList"
              :key="index"
              class="slot-item"
            >
              <NuxtImg :src="item.image" />
              <p>
                {{ userStore.moneyUnit }}<span>{{ item.value }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="btnBox" @click="toActivity">
          <div class="btn">
            <span>{{ lang.girar_btn }}</span>
          </div>
        </div>
        <NuxtImg class="hand" src="/images/init-page/slot_hand.png" />
      </div>
      <div class="bottom_title">
        <div>
          · <span>{{ lang.girar_description_title }}</span> ·
        </div>
        <p>
          {{ lang.girar_description_1 }}
        </p>
        <p>
          {{ lang.girar_description_2 }}
        </p>
      </div>
      <div class="award_box_content" v-show="showReward">
        <div class="win_box">
          <NuxtImg class="winTitle" src="/images/init-page/win_title.png" />
          <div class="tips">
            <NuxtImg src="/images/init-page/01.png" /><span
              >{{ userStore.moneyUnit }}{{ formData.data_2 }}</span
            >
          </div>
          <div class="playSoccer_btn" @click="close">
            <div class="playSoccer_btn_box">
              <div class="playSoccer_btn_box_span">
                <span>{{ lang.girar_reward_btn }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("init-page");
const userStore = useUserStore();

defineProps(["active"]);
const emits = defineEmits(["close"]);

const formData = ref({
  data_1: "1",
  data_2: "3.5",
});

// 老虎机项目数据
const slotItems = [
  {
    image: "/images/init-page/01.png",
    value: "2.5",
  },
  {
    image: "/images/init-page/02.png",
    value: "2",
  },
  {
    image: "/images/init-page/03.png",
    value: "2",
  },
  {
    image: "/images/init-page/04.png",
    value: "2",
  },
  {
    image: "/images/init-page/05.png",
    value: "3.5",
  },
  {
    image: "/images/init-page/06.png",
    value: "3.5",
  },
];
// 用2组，保证动画连贯性
const slotList = ref([...slotItems, ...slotItems]);

// 处理点击
const showReward = ref(false);
function toActivity() {
  close();
  // if (userStore.isLogin) {
  //   showReward.value = true;
  // } else {
  //   userStore.changeShowLogin(true);
  //   close();
  // }
}
function close() {
  emits("close");
}
</script>

<style scoped lang="scss">
.slot {
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.slot_title_img {
  width: 80%;

  img {
    width: 100%;
    height: auto;
  }
}

.slot_game {
  width: 100%;
  height: 9rem;
  background-image: var(--ac9fedd2);
  background-size: 100% 100%;
  position: relative;

  .slot_title {
    position: absolute;
    top: 2.25rem;
    left: 50%;
    transform: translate(-50%);
    color: var(--theme-dec4);
    font-weight: 700;
    font-size: 0.4rem;

    span {
      margin-right: 0.1rem;
      color: var(--theme-neutral1);
    }
  }

  .slot-container {
    width: 25%;
    height: 4.7rem;
    overflow: hidden;
    position: absolute;
    top: 3.1rem;
    left: 51%;
    transform: translate(-50%);
  }

  .slot-strip {
    width: 100%;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    will-change: transform;
    animation: scroll-96e75681 3s linear infinite;

    .slot-item {
      width: 100%;
      height: 110px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 75px;
        display: block;
      }

      p {
        transform: translateY(-0.5rem);
        font-size: 0.8rem;
        background: linear-gradient(
          180deg,
          var(--theme-neutral1),
          var(--theme-dec4)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
        -webkit-text-stroke: 0.03rem var(--theme-color4);
      }
    }
  }

  .btnBox {
    width: 40%;
    border-radius: 0.5rem;
    transform: translate(-50%);
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1.14rem;
    margin-top: 1rem;
    background: var(--ac9fedce);
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    transition: transform 0.3s ease;
    font-weight: 700;
    font-size: 0.52rem;
    color: var(--theme-neutral1);
    transform-origin: center;
    border-radius: 0.5rem;
    animation: scaleAndHighlight-96e75681 1s 2s infinite;
    span {
      transform: translateY(-0.04rem);
    }
  }

  .hand {
    position: absolute;
    bottom: -15%;
    left: 67%;
    width: 1.53rem;
    animation: moveHand-96e75681 1s 6s infinite;
  }
}

.bottom_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  padding: 0.3rem 0.2rem;
  border-radius: 0.3rem;
  margin-top: 1rem;
  background: var(--theme-neutral4);

  div {
    color: #f0f8ff;
    font-size: 0.4rem;
    font-weight: 600;

    span {
      color: var(--theme-dec4);
    }
  }

  p {
    font-size: 0.3rem;
    color: var(--theme-neutral1);

    &:last-child {
      margin-top: 0.3rem;
    }
  }
}

.award_box_content {
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--theme-neutral5);
  display: flex;
  align-items: center;
  justify-content: center;

  .win_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: tips_am-96e75681 1s ease;
  }

  .winTitle {
    width: 7.53rem;
  }

  .tips {
    position: relative;
    width: 80%;
    height: 6.5rem;
    background-image: var(--ac9fedd0);
    background-size: 100% 100%;
    animation: tips_am-96e75681 1s ease;

    img {
      width: 3.4rem;
      position: absolute;
      top: 33%;
      left: 50%;
      z-index: 9;
      transform: translate(-50%);
    }
  }

  .playSoccer_btn {
    display: flex;
    justify-content: center;
    margin-top: -1rem;
    overflow: hidden;

    .playSoccer_btn_box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 5.34rem;
      height: 1.54rem;
      margin-top: 1rem;
      background: var(--ac9fedce) no-repeat center / cover;
      background-size: cover;
      font-family: Microsoft YaHei;
      transition: transform 0.3s ease;

      .playSoccer_btn_box_span {
        font-weight: 700;
        font-size: 0.52rem;
        color: var(--theme-neutral1);
        text-stroke: 0.02px var(--theme-color9);
        -webkit-text-stroke: 0.02px var(--theme-color9);
        transform: translateY(-0.05rem);
      }
    }
  }
}

// 动画关键帧
@keyframes scroll-96e75681 {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes scaleAndHighlight-96e75681 {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px #ff0c;
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

@keyframes moveHand-96e75681 {
  0% {
    transform: translate(-25%, -25%);
    box-shadow: none;
  }
  50% {
    transform: translate(0);
  }
  100% {
    transform: translate(-25%, -25%);
    box-shadow: none;
  }
}

@keyframes tips_am-96e75681 {
  0% {
    transform: scale(0.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>
